<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>客户主页</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  <style>
    .nav a {
      display: block;
      padding: 10px 15px;
      color: #333;
      text-decoration: none;
    }

    .dropdown {
      position: relative;
    }

    .dropdown > a::after {
      content: '▼';
      float: right;
      font-size: 10px;
      margin-top: 4px;
    }

    .dropdown-content {
      display: none;
      flex-direction: column;
      background-color: #f7f9fc;
      padding-left: 20px;
    }

    .dropdown:hover .dropdown-content,
    .dropdown.active .dropdown-content {
      display: flex;
    }

    .dropdown-content a {
      padding: 8px 10px;
      font-size: 14px;
    }

    .nav a:hover {
      background-color: #e6f0ff;
    }
  </style>
</head>
<body>
  <div class="layout">
    <!-- 左侧导航栏 -->
    <div class="sidebar">
      <div class="user-profile">
        <img src="{{ url_for('static', filename='user.png') }}" alt="头像">
        <div class="username">{{ session.get('user') }}</div>
      </div>
      <div class="nav">
        <a href="{{ url_for('customer.balance') }}"><i class="bi bi-wallet"></i> 余额查询</a>
        <a href="{{ url_for('customer.transactions') }}"><i class="bi bi-card-list"></i> 交易记录</a>

        <div class="dropdown">
          <a href="#"><i class="bi bi-arrow-left-right"></i> 交易中心</a>
          <div class="dropdown-content">
            <a href="{{ url_for('customer.deposit') }}">💰 存款</a>
            <a href="{{ url_for('customer.withdraw') }}">💸 取款</a>
            <a href="{{ url_for('customer.transfer') }}">🔁 转账</a>
          </div>
        </div>

        <a href="{{ url_for('customer.report_lost') }}"><i class="bi bi-exclamation-circle"></i> 挂失</a>

        <div class="dropdown">
          <a href="#"><i class="bi bi-lock"></i> 修改密码</a>
          <div class="dropdown-content">
            <a href="{{ url_for('customer.change_password') }}">已知原密码修改</a>
            <a href="{{ url_for('customer.forget_password_reset') }}">忘记密码重置</a>
          </div>
        </div>

        <a href="{{ url_for('logout') }}"><i class="bi bi-box-arrow-right"></i> 退出登录</a>
      </div>
    </div>

    <!-- 右侧主内容区域 -->
    <div class="main">
      <div class="topbar">
        <h1>客户服务中心</h1>
      </div>
      <div class="content">
        {% block content %}
        <div class="card-container">
          <div class="table-card">
            <h2>账户安全</h2>
            <!-- 可以在这里放一些欢迎信息或者安全提示 -->
          </div>
        </div>
        {% endblock %}
      </div>
    </div>
  </div>

  <script>
    // 点击展开/折叠交易中心和修改密码子菜单
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll('.dropdown > a').forEach(function (toggle) {
        toggle.addEventListener('click', function (e) {
          e.preventDefault(); // 防止跳转 #
          const parent = this.parentElement;
          parent.classList.toggle('active');
        });
      });
    });
  </script>
</body>
</html>
